<template>
  <n-form-item v-for="item in tableColumns" :key="item.key" :label="item.title">
    <n-select
      v-if="item.searchProps.type === 'select'"
      v-model:value="queryForm[item.searchKey ? item.searchKey : item.key]"
      style="width: 200px"
      :options="optionsMap.get(item.searchKey ? item.searchKey : item.key) || []"
      clearable
      filterable
      :placeholder="'请选择' + item.title"
    />
    <!-- NAreaSelect -->
    <template v-else-if="item.searchProps.type === 'areaSelect'">
      <AreaSelect
        v-bind="$attrs"
        v-model="queryForm[(item.searchKey ? item.searchKey : item.key) + '-llike']"
      />
    </template>
    <template v-else-if="item.searchProps.type === 'date-picker'">
      <n-date-picker
        clearable
        value-format="yyyy-MM-dd HH:mm:ss"
        v-model:formatted-value="queryForm[item.searchKey ? item.searchKey : item.key]"
        type="datetime"
        placeholder="开始时间"
      />
    </template>
    <template v-else-if="item.searchProps.type === 'date-range'">
      <n-date-picker
        clearable
        value-format="yyyy-MM-dd HH:mm:ss"
        v-model:formatted-value="
          queryForm[item.searchKey ? item.searchKey + '-gte' : item.key + '-gte']
        "
        type="datetime"
        placeholder="开始时间"
      />
      <span class="ml-3 mr-3">-</span>
      <n-date-picker
        clearable
        alue-format="yyyy-MM-dd HH:mm:ss"
        v-model:formatted-value="
          queryForm[item.searchKey ? item.searchKey + '-lte' : item.key + '-lte']
        "
        type="datetime"
        placeholder="结束时间"
      />
    </template>
    <n-input
      v-else-if="item.searchProps.type === 'text'"
      clearable
      v-model:value="
        queryForm[
          (item.searchKey ? item.searchKey : item.key) + item.searchType ? item.searchType : '-like'
        ]
      "
      :placeholder="'请输入' + item.title"
    />
  </n-form-item>
</template>
<script lang="ts" setup>
//   (item.searchKey ? item.searchKey : item.key) + (item.searchProps.isLike ? '-like' : '')
import { PropType } from 'vue';
import { MyTableBasicColumn } from './type';
import { AreaSelect } from '@/components/area-select/index';
const props = defineProps({
  queryForm: {
    type: Object,
    default: () => ({}),
  },
  optionsMap: {
    type: Map,
    default: new Map(),
  },
  tableColumns: {
    type: Array as PropType<MyTableBasicColumn[]>,
    default: () => [],
  },
});
</script>
<style lang="less" scoped>
.query-item {
}
</style>
